<!doctype html>
<html>
  <head>
  
  <meta charset="UTF-8">
  <meta content="user-scalable=no,width=device-width, initial-scale=1" id="viewport" name="viewport" initial-scale="1">
  </head>
  <script language="javascript" type="text/javascript" src="../js/js/baseJs.js"></script>
<body>
	<div id="test" class="wap-apply-pos">
		<!-- <button type="button" @click="putb64()" style="font-size: 1.3rem;">发送</button>
		<div id="myDiv" >
		响应内容
		</div> -->
		<div class="wap-header">上传证件
			<a class="back" onClick="javascript:window.history.back();return false;"></a>
		</div>
		<div class="step-four">
			<div style="font-size: .32rem;color: red;margin-top: 1.6rem;margin-left: .6rem;">*请身份认证</div>				
			<div class="up-load-c" style="padding-bottom: 2.4rem;">
				<div class="item-c">
					<div style="font-size:.28rem;margin: 0 .2rem 0 .6rem;align-items: center;display: flex;min-width: 1.5rem;">银行卡正面</div>
					<div class="upload-wrap">
					    <div class="box" v-if="firstImgUrlList.length==0">
					        <label class="p dotted">
					            <input type="file" accept="image/*" name="file"
					                   @change="onChooseImage($event,1)">
					            <img src="../image/add_ico.png" alt="">
					        </label>
					    </div>
					    <template v-for="(imgIndex,imgItem) in firstImgUrlList">
					        <div class="box">
					            <div class="image-c">
					                <img :src="imgItem">
					                <div class="delete" @click.stop="deleteImg(imgIndex,firstImgUrlList)">
					                    <img src="../image/close_ico.png" alt="">
					                </div>
					            </div>
					        </div>
					    </template>
					</div>
				</div>
				<div class="item-c">
					<div style="font-size:.28rem;margin: 0 .2rem 0 .6rem;align-items: center;display: flex;min-width: 1.5rem;">银行卡反面</div>
					<div class="upload-wrap">
					    <div class="box" v-if="secondImgUrlList.length==0">
					        <label class="p dotted">
					            <input type="file" accept="image/*" name="file"
					                   @change="onChooseImage($event,2)">
					            <img src="../image/add_ico.png" alt="">
					        </label>
					    </div>
					    <template v-for="(imgIndex,imgItem) in secondImgUrlList">
					        <div class="box">
					            <div class="image-c">
					                <img :src="imgItem">
					                <div class="delete" @click.stop="deleteImg(imgIndex,secondImgUrlList)">
					                    <img src="../image/close_ico.png" alt="">
					                </div>
					            </div>
					        </div>
					    </template>
					</div>
				</div>
				<div class="item-c">
					<div style="font-size:.28rem;margin: 0 .2rem 0 .6rem;align-items: center;display: flex;min-width: 1.5rem;">身份证正面</div>
					<div class="upload-wrap">
					    <div class="box" v-if="thirdImgUrlList.length==0">
					        <label class="p dotted">
					            <input type="file" accept="image/*" name="file"
					                   @change="onChooseImage($event,3)">
					            <img src="../image/add_ico.png" alt="">
					        </label>
					    </div>
					    <template v-for="(imgIndex,imgItem) in thirdImgUrlList">
					        <div class="box">
					            <div class="image-c">
					                <img :src="imgItem">
					                <div class="delete" @click.stop="deleteImg(imgIndex,thirdImgUrlList)">
					                    <img src="../image/close_ico.png" alt="">
					                </div>
					            </div>
					        </div>
					    </template>
					</div>
				</div>
				<div class="item-c">
					<div style="font-size:.28rem;margin: 0 .2rem 0 .6rem;align-items: center;display: flex;min-width: 1.5rem;">身份证反面</div>
					<div class="upload-wrap">
					    <div class="box" v-if="fourImgUrlList.length==0">
					        <label class="p dotted">
					            <input type="file" accept="image/*" name="file"
					                   @change="onChooseImage($event,4)">
					            <img src="../image/add_ico.png" alt="">
					        </label>
					    </div>
					    <template v-for="(imgIndex,imgItem) in fourImgUrlList">
					        <div class="box">
					            <div class="image-c">
					                <img :src="imgItem">
					                <div class="delete" @click.stop="deleteImg(imgIndex,fourImgUrlList)">
					                    <img src="../image/close_ico.png" alt="">
					                </div>
					            </div>
					        </div>
					    </template>
					</div>
				</div>
				<div class="item-c">
					<div style="font-size:.28rem;margin: 0 .2rem 0 .6rem;align-items: center;display: flex;min-width: 1.5rem;">手持身份证</div>
					<div class="upload-wrap">
					    <div class="box" v-if="fiveImgUrlList.length==0">
					        <label class="p dotted">
					            <input type="file" accept="image/*" name="file"
					                   @change="onChooseImage($event,5)">
					            <img src="../image/add_ico.png" alt="">
					        </label>
					    </div>
					    <template v-for="(imgIndex,imgItem) in fiveImgUrlList">
					        <div class="box">
					            <div class="image-c">
					                <img :src="imgItem">
					                <div class="delete" @click.stop="deleteImg(imgIndex,fiveImgUrlList)">
					                    <img src="../image/close_ico.png" alt="">
					                </div>
					            </div>
					        </div>
					    </template>
					</div>
				</div>
				
				<div class="input-c">
					<div class="name">身份证*：</div>
					<input placeholder="请输入身份证" v-model="idNo"/>
				</div>
				<div class="input-c">
					<div class="name">开户行*：</div>
					<input placeholder="请输入银行卡开户行" v-model="bankName"/>
				</div>
				<div class="input-c">
					<div class="name">银行卡号*：</div>
					<input placeholder="请输入银行卡号码" v-model="bankNo"/>
				</div>
				<!-- <div class="input-c">
					<div class="name">姓名*：</div>
					<input placeholder="请输入姓名" v-model="realName" />
				</div> -->
				<div class="input-c">
					<div class="name">收货地址：</div>
					<input placeholder="上门安装请输入收货地址" v-model="address" />
				</div>
				<div class="input-c">
					<div class="name">发票抬头：</div>
					<input placeholder="需要发票请填写抬头" v-model="doc" />
				</div>
			</div>
			<div class="next-btn" >
				<div class="btn" @click="applyProjectItem()">确定申请</div>
			</div>
		</div>
		
		<!--  压缩图片用的  -->
		<canvas id="compressCanvas" style="position: fixed; z-index: -1; opacity: 0; top: -100%; left: -100%"></canvas>
	</div>
	<script src="../js/js/rem_fix.js"></script>
	<script src="../js/js/common.js"></script>
<script type="text/javascript">
	var projectUserId = parseInt(window.location.hash.split("#")[1]);
	var loginUrl = "../userBundle/login.mobile.html" + "?" + "../userBundle/applayPos.mobile.html" + "#1";
	var token = getCookie("userToken");
	var userId = getCookie("userId");
	if (!token || !userId) {
		window.location.href = loginUrl;
	}
	var testApp=new Vue({
		el:"#test",
		data:{
			isApplyProjectItem: false,
			projectUserId: projectUserId,
			step: '1',
			firstImgUrlList:[],//银行卡正面 存放七牛返回地址列表
			secondImgUrlList:[],	//银行卡反面 存放七牛返回地址列表		
			thirdImgUrlList:[],		//身份证正面 存放七牛返回地址列表	
			fourImgUrlList :[],//身份证反面 存放七牛返回地址列表
			fiveImgUrlList:[],//手持身份证 存放七牛返回地址列表
			projectItems:[],
			idNo: '',
			realName: '',
			bankName: '',
			bankNo: '',
			qiniuData: {
				key: "",
				token: ""
			},
			upload_qiniu_addr: '',
			userData: '',
			address:'',
			doc:''
		},
		ready: function() {
			$("#uploadPayInfo").show();
			// var url = "/project/getProjectItems ";
			// var data = {
			// 	id: projectId
			// }
			// pushData(url, data, function(res) {
			// 	console.log(res)
			// 	if (res.state) {
			// 		this.projectItems = res.data.projectItems;
			// 	} else if (res.errorCode == 008) {
			// 		window.location.href = url;
			// 	} else {
			// 		alert(res.message)
			// 	}
			// }.bind(this))
			var qiNiuUpData = {
				client: 1,
				token: token,
				userId: userId
			}
			pushData("/qiniu/get_token ", qiNiuUpData, function(res) {
				if (res.state) {
					this.qiniuData.token = res.data.result;
					console.log(res)
				} else if (res.errorCode == 008) {
					window.location.href = loginUrl;
				} else {
					alert(res.message)
				}
			}.bind(this));
			pushData("/qiniu/get_image_rul", qiNiuUpData, function(res) {
				if (res.state) {
					this.upload_qiniu_addr = res.data.url;
				} else if (res.errorCode == 008) {
					window.location.href = loginUrl;
					alert(res.message)
				}
			}.bind(this));
			this.getUserData();
		},
		methods:{
			getUserData: function() {
				var url = "/user/getUserById";
				var data = {
					client: 1,
					token: token,
					userId: parseInt(userId)
				}
				pushData(url, data, function(res) {
					if (res.state) {
						this.userData = res.data.user;
			
					} else if (res.errorCode == 008) {
						window.location.href = loginUrl;
					} else {
						alert(res.message)
					}
				}.bind(this))
			},
			putb64:function(imgItem,type){
				var that=this;
				var pic = imgItem.split('base64,')[1]
			    var url = "http://up.qiniu.com/putb64/-1"; 
				var xhr = new XMLHttpRequest();
				var xhrget = new XMLHttpRequest();
				var r;				
				xhr.onreadystatechange=function(){
					if (xhr.readyState==4){
						r=JSON.parse(xhr.responseText)
						if (type == 1) {
							that.firstImgUrlList.push(that.upload_qiniu_addr + "/" + r.key);
							console.log(that.firstImgUrlList)
						} else if (type == 2) {
							that.secondImgUrlList.push(that.upload_qiniu_addr + "/" + r.key);
						} else if (type == 3) {
							that.thirdImgUrlList.push(that.upload_qiniu_addr + "/" + r.key);
						} else if (type == 4) {
							that.fourImgUrlList.push(that.upload_qiniu_addr + "/" + r.key);
						} else if (type == 5) {
							that.fiveImgUrlList.push(that.upload_qiniu_addr + "/" + r.key);
						} else if (type == 6) {
							that.sixImgUrlList.push(that.upload_qiniu_addr + "/" + r.key);				
						}
					}
				}			 
				xhr.open("POST", url, true); 
				xhr.setRequestHeader("Content-Type", "application/octet-stream"); 
				xhr.setRequestHeader("Authorization", "UpToken "+that.qiniuData.token); 
				xhr.send(pic);
			},
			onChooseImage:function(event, type){
				var that = this;
				//判断图片数量是否已上限
				
				var currentImgTempArray = [];
				if (currentImgTempArray.length >= 5) {
					alert("最多上传5张图片");
					return false;
				}
				
				//使用FileReader对文件对象进行操作
				var reader = new FileReader();
				reader.readAsDataURL(event.target.files[0]); //将读取到的文件编码成Data URL			
				reader.onload = function() { //读取完成时
					var replaceSrc = reader.result; //文件输出的内容
					//console.log(reader)
					//压缩图片处理
					var image = new Image();
					image.src = replaceSrc;
					image.onload = function() {
						//获取图片初始宽高
						var width = image.width;
						var height = image.height;
						//判断图片宽度，再按比例设置宽度和高度的值
						if (width > 1024) {
							width = 1024;
							height = Math.ceil(1024 * (image.height / image.width));
						}
				
						//将图片重新画入canvas中
						var canvas = document.getElementById("compressCanvas");
						var context = canvas.getContext("2d");
						canvas.width = width;
						canvas.height = height;
						context.beginPath();
						context.fillStyle = "#ffffff";
						context.fillRect(0, 0, width, height);
						context.fill();
						context.closePath();
						context.drawImage(image, 0, 0, width, height);
						replaceSrc = canvas.toDataURL("image/jpeg"); //canvas转DataURL(base64格式)
				
						//将压缩后的路径 追加到临时路径数组中
						var totalList = [];
						if (currentImgTempArray.length > 0) {
							totalList = currentImgTempArray.concat(replaceSrc);
						} else {
							totalList[0] = replaceSrc;
						}				
						that.onUploadImg(totalList, type)
					};
				};
				
			},
			onUploadImg:function(totalList,type){

				var that=this;
				totalList.forEach(function(imgItem){
					that.putb64(imgItem,type)
				})
			},
			applyProjectItem: function() {			
				if(this.firstImgUrlList.length==0){
					alert("请上传银行卡正面")
					return
				}
				if(this.secondImgUrlList.length==0){
					alert("请上传银行卡反面")
					return
				}
				if(this.thirdImgUrlList.length==0){
					alert("请上传身份证正面")
					return
				}
				if(this.fourImgUrlList.length==0){
					alert("请上传身份证反面")
					return
				}
				if(this.fiveImgUrlList.length==0){
					alert("请上传手持身份证照片")
					return
				}
				if(!this.bankNo){
					alert("请上传银行卡号")
					return
				}
			
				if (this.isApplyProjectItem) {
					return;
				}
				// if (!this.realName) {
				// 	alert("请填写姓名");
				// 	return;
				// }
				if(!IdentityCodeValid(this.idNo)){
					alert("请填写正确的身份证");
					return;
				}
				this.isApplyProjectItem = true;
				var url = "/project/perfectProjectItem";
				var data = {
					client: 1,
					address:this.address,
					bankCardPositive: this.firstImgUrlList[0], //正面
					bankCardNegative: this.secondImgUrlList[0], //反面
					bankName: this.bankName,
					idPositive: this.thirdImgUrlList[0], //正面
					idNegative: this.fourImgUrlList[0], //反面
					personIdImage: this.fiveImgUrlList[0],					
					projectItemUserId: this.projectUserId,
					telephone: '',
					idNo: this.idNo,
					bankNo: this.bankNo,
					doc: this.doc,
					token: token,
					userId: userId
				}					
				pushData(url, data, function(res) {
					this.isApplyProjectItem = false
					if (res.state) {
						alert("上传身份信息成功");
						window.location.href = "/userBundle/userCenter.mobile.html"
					} else if (res.errorCode == 008) {
						window.location.href = loginUrl;
					} else {
						alert(res.message);
					}
				}.bind(this));
			},
			//删除某张图片
			deleteImg: function(idx, imageList) {
				var that = this;
				imageList.splice(idx, 1);
			},	
		}
	})

</script>



</body>
</html>